
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>样式布局</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .head{
                width: 1000px;
                height: 80px;
                background:rgb(60, 190, 241);
                margin-left: auto;
                margin-right: auto;
            }
            .two{
                height: 80px;
                background:rgb(53, 188, 241);
                margin-top: 10px;
                margin-bottom: 10px;
            } 
            .three{
                width: 1000px;
                height: 330px;
                background:rgb(76, 197, 245);
                margin-left: auto;
                margin-right: auto;
            }
            .four{
                width: 1000px;
                height: 500px;
                /* background:skyblue; */
                margin-left: auto;
                margin-right: auto;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .footer{
                height: 300px;
                background:skyblue;
              
            } 
            .left{
                width: 280px;
                height: 500px;
                background:rgb(20, 238, 209);
                float: left;

            }
            .right{
                width: 710px;
                height: 500px;
                /* background:lime;s */
                float: right;

            }
            .top{
                width: 710px;
                height: 100px;
                background:pink;
        
            }
            .center{
                width: 710px;
                height: 280px;
                /* background:pink; */
                margin-top: 10px;
                margin-bottom: 10px;
        
            }
            .a1{
                width: 200px;
                height: 280px;
                background:rgb(69, 118, 224);
                float: left;

            }
            .a2{
                width: 500px;
                height: 280px;
                background:rgb(63, 162, 219);
                float: right;

            }
           
        </style>
    </head>
    <body>
        <div class="head"><p>高80</p></div>
        <div class="two"><p>高50</p></div>
        <div class="three"><p>高330</p></div>
        <div class="four">
            <div class="left"><p>高500宽280</p></div>
            <div class="right">
                <div class="top"><p>高100</p></div>
                <div class="center">
                    <div class="a1"><p>内容</p></div>
                    <div class="a2"><p>内容</p></div>
                </div>
                <div class="top"><p>高100</p></div>
            </div>
        </div>
        <div class="footer"><p>高300</p></div>
        
    </body>
</html>